{extend name="layout/layout" /}

{block name="style"}
	<style>
		.recharge{
			margin-bottom: 50px;
		}
		.icon{
			margin-left: 20px;
		}

		.icon img{
			width: 30px;
			position: absolute;
			right: 10px;
			top: 5px;
		}

		.mui-table-view-cell{
			padding-right: 50px;
			position: relative;
		}

		.input-box{
			background: #fff;
			padding: 10px;
			margin-top: 5px;
		}

		.submit-btn{
			height: 45px;
			line-height: 45px;
			position: fixed;
			bottom: 0;
			left: 0;
			width:100%;
			background: #e60012;
			color:#ffff;
			text-align: center;
		}
	</style>
{/block}

{block name="main"}
	<div class="recharge text-md"  v-cloak>
		<div class="package" v-if="packages">
			<ul class="mui-table-view">
			    <li class="mui-table-view-cell" v-for="item in packages.suites" @tap="package_id = item.id">
			    	<div class="name mui-pull-left">{{item.content}}</div>
					<div class="icon mui-pull-right">
						<img class="img-responsive" :src="package_id == item.id?'/assets/img/selected.png':'/assets/img/she.png'" />
					</div>
					<div class="mui-pull-right pay-amount text-danger">{{item.pay_content}}</div>
					<div class="mui-clearfix"></div>
			    </li>
			</ul>
		</div>

		<div class="input-box">
			<div class="tips text-gray">任意充值{{account_name}}金额</div>
			<div class="mui-input-row">
				<input type="number" placeholder="请输入充值金额" v-model="amount" />
		    </div>
		</div>

		<div class="submit-btn" @tap="submitRecharge()">确认充值</div>
	</div>
{/block}

{block name="script"}
	<script>
		var recharge = new Vue({
			el: '.recharge',
			data: {
				account_type: "{$recharge_type}",
			    input: 1,
			    package_id: '',
			    account_name: '余额',
			    amount: '',
			    packages: [],
			},
			mounted: function(){
				this._get_package();
			},

			methods: {
				//获取充值套餐
				_get_package: function(){
					var that = this;
					request(that, {'url': 'recharge/getPackage', 'data': {'type': that.account_type}},function(res) {
						that.packages = res.data;
					});
				},
				
				//提交充值
				submitRecharge: function(){
					var that = this;
					var postData = {
						type: that.account_type,
						package_id: that.package_id,
						amount: that.amount,
					}

					layer.open({
						type:2,
						shadeClose:false,
						shade: 'background-color: rgba(0,0,0,.3)',
					});

					request(that, {'url': 'recharge/recharge', 'data': postData}, function(res) {
						if(res.code == 200) {
							layer.closeAll();
							mui.alert(res.msg, function(){
								location.href = '/mobile/funds/index'
							})
						} else if(res.code == 201) {
							location.href = '/mobile/order/payorder?ids='+res.data.order_id+'&type=recharge';
						} else {
							layer.closeAll();
							mui.alert(res.msg);
						}
					})

				}
			}
		});
	</script>
{/block}

{block name="navbar"}{/block}